<template>
    <view class="uni-pa-6 relative text-white">
        <!-- 遮罩层 -->
        <view class="mask absolute top-0 left-0 w-full h-full bg-cover bg-center"
            :style="{ backgroundImage: `url(${user.cover ? user.cover : userBgUrl})` }">
        </view>
        <view class="w-full h-50 relative">
            <view class="w-full h-full flex items-center uni-py-5">
                <image class="w-20 h-20 rounded-full bg-gray-200" :src="user.avatar ? user.avatar : userUrl"
                    mode="aspectFill" />
                <view class="flex-auto uni-pl-10">
                    <view>{{ user.name }}</view>
                    <view class="text-gray-300">{{ account }}</view>
                </view>
            </view>
        </view>
        <view class="uni-py-8 text-gray-200">{{ user.brief || '這人很懶，什麽都沒留下...' }}</view>
        <view class="flex justify-between items-center uni-pb-8">
            <view class="flex">
                <view @click="toExtra(user.id, 0)" class="uni-pr-10 flex flex-col text-center">
                    <text>{{ user.focus }}</text>
                    <text>關注</text>
                </view>
                <view @click="toExtra(user.id, 1)" class="uni-pr-10 flex flex-col text-center">
                    <text>{{ user.fans }}</text>
                    <text>粉絲</text>
                </view>
                <view class="flex flex-col text-center">
                    <text>{{ user.like + user.favorite || 0 }}</text>
                    <text>獲贊與收藏</text>
                </view>
            </view>
            <view>
                <button v-if="localUserId != userId" @click="focusUser(userId, localUserId, isFocus)" type="default"
                    size="mini">{{
                        isFocus ? '已關注' : '關注' }}</button>
                <template v-else>
                    <button @click="goto('/pages/user/info')" type="default" size="mini">編輯資料</button>
                    <button @click="goto('/pages/setting/index')" type="default" size="mini">設置</button>
                </template>
            </view>
        </view>
        <view class="h-3 w-full bg-white absolute left-0 bottom-0 rounded-t-3xl"></view>
    </view>
</template>

<script>
import {
    httpUserEditInfo,
    httpUserRelationship,
    httpUserFocus,
    httpUserInfo
} from '@/utils/api.js'
export default ({
    props: {
        userId: ''
    },
    data() {
        return {
            userUrl: '../../static/img/user.jpg',
            userBgUrl: '../../static/img/user-bg.jpg',
            localUserId: '',
            isFocus: false,
            user: {}
        }
    },
    computed: {
        account() {
            const reg = /(\d{3})\d{4}(\d{4})/;
            if (this.user.phone) {
                return this.user.phone.replace(reg, "$1****$2")
            } else {
                return ''
            }
        },
    },
    mounted() {
        this.getUserInfo()
        uni.$on('refresh', () => {
            this.getUserInfo()
        })
    },
    methods: {
        goto(url) {
            uni.navigateTo({
                url
            })
        },
        // 加载用户信息
        async getUserInfo() {
            const localUser = getApp().globalData.user
            if (localUser) {
                this.localUserId = localUser.id || localUser.userId
                this.getUserRelationship(this.userId, this.localUserId)
            }
            const { code, data } = await httpUserInfo(this.userId)
            if (code === 200) {
                this.user = data
                if (this.localUserId !== this.userId) {
                    uni.setNavigationBarTitle({
                        title: data.name
                    })
                }
            }
        },
        // 获取關注关系
        async getUserRelationship(userId, localUserId) {
            const { code, data } = await httpUserRelationship(userId, localUserId)
            if (code === 200) {
                this.isFocus = data.isFocus
            }
        },
        // 關注用户
        async focusUser(userId, fansId, isFocus) {
            if (isFocus) {
                uni.showModal({
                    title: '确认不再關注？',
                    success: async (res) => {
                        if (res.confirm) {
                            const { code } = await httpUserFocus(userId, fansId, true)
                            if (code === 200) {
                                this.getUserRelationship(this.userId, this.localUserId)
                            }
                        }
                    }
                })
            } else {
                const { code } = await httpUserFocus(userId, fansId)
                if (code === 200) {
                    this.getUserRelationship(this.userId, this.localUserId)
                }
            }
        },
        // 跳转用户附属页
        toExtra(userId, index) {
            let url
            if (this.localUserId === userId) {
                url = `/pages/user/extra?userId=${userId}&index=${index}&userName=${this.user.name}`
            } else {
                url = `/pages/author/extra?userId=${userId}&index=${index}&userName=${this.user.name}`
            }
            uni.navigateTo({
                url
            })
        },
    }
})
</script>

<style lang="scss">
.mask {
    z-index: -1;
}

.mask::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0, 0, 0, .3);
    // backdrop-filter: blur(4px);
}
</style>